<template>
  <el-card class="box-card">
    <div slot="header" class="clearfix">
      <span>标题栏</span>
    </div>
    <div class="bds">
      <el-collapse v-model="activeName">
        <el-collapse-item title="组件样式" name="c0">
          <el-form size="medium" label-width="100px">
            <el-form-item label="样式类型">
              <el-radio-group v-model="data.titleBarType">
                <el-radio :label="0">样式一</el-radio>
                <el-radio :label="1">样式二</el-radio>
                <el-radio :label="2">样式三</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-form>
        </el-collapse-item>
        <el-collapse-item title="组件内容" name="c1">
          <el-form size="medium" label-width="100px">
            <div v-if="data.titleBarType==0">
              <el-form-item label="左侧图标">
                <div class="icon_box">
                  <span class="hasIcon" v-show="data.content.left_icon != ''">
                    <i :class="data.content.left_icon + ' iconfont'"></i>
                    <i class="icon-abl-close el-icon-error" @click="removeIcon('left_icon')"></i>
                    <span class="choose_bar" @click="chooseIcon('left')">
                      <i class="txt">替换</i>
                    </span>
                  </span>
                  <span class="noIcon" v-show="data.content.left_icon == ''">
                    <i class="el-icon-plus" style="color:#409EFF;" @click="chooseIcon('left')"></i>
                  </span>
                </div>
              </el-form-item>
            </div>
            <div v-else>
              <el-form-item label="色块颜色">
                <ColorPicker :color="data.bar" :name="'bg'"></ColorPicker>
              </el-form-item>
              <el-form-item label="色块宽度">
                <div class="slider_box">
                  <el-slider class="slider_item" :max="50" v-model="data.bar.width"></el-slider>
                  <el-input-number v-model="data.bar.width" :controls="false" :min="0" :max="50"></el-input-number>
                </div>
              </el-form-item>
              <el-form-item label="色块高度">
                <div class="slider_box">
                  <el-slider class="slider_item" :max="20" v-model="data.bar.height"></el-slider>
                  <el-input-number v-model="data.bar.height" :controls="false" :min="0" :max="20"></el-input-number>
                </div>
              </el-form-item>
            </div>
            <el-form-item label="左侧文字">
                <el-input
                  style="width:300px;"
                  maxlength="10"
                  show-word-limit
                  placeholder
                  v-model="data.content.left"
                ></el-input>
              </el-form-item>
            <el-form-item label="右侧图标">
              <div class="icon_box">
                <span class="hasIcon" v-show="data.content.right_icon != ''">
                  <i :class="data.content.right_icon + ' iconfont'"></i>
                  <i
                    class="icon-abl-close el-icon-error"
                    v-show="data.content.right_icon != ''"
                    @click="removeIcon('right_icon')"
                  ></i>
                  <span class="choose_bar" @click="chooseIcon('right')">
                    <i class="txt">替换</i>
                  </span>
                </span>
                <span class="noIcon" v-show="data.content.right_icon == ''">
                  <i class="el-icon-plus" style="color:#409EFF;" @click="chooseIcon('right')"></i>
                </span>
              </div>
            </el-form-item>
            <el-form-item label="右侧文字">
              <el-input
                style="width:300px;"
                maxlength="2"
                show-word-limit
                placeholder
                v-model="data.content.right"
              ></el-input>
            </el-form-item>
            <el-form-item label="链接地址">
              <!-- <el-input style="width:300px;" placeholder="请选择链接地址" readonly>
                <template slot="prepend"><i class="el-icon-link"></i></template>
                <template slot="append"><el-link type="primary">选择链接</el-link></template>
              </el-input>-->
              <!-- <div class="select_link" @click="chooseLink">
                  <div class="select_btn">
                    <i class="el-icon-link"></i>&nbsp;<span>选择链接</span>
                  </div>
              </div>-->
              <div @click="selectlink()">
                <Linkdiv :linkdata="data.linkdata"></Linkdiv>
              </div>
            </el-form-item>
          </el-form>
        </el-collapse-item>

        <el-collapse-item title="组件样式" name="c2">
          <el-form size="medium" label-width="100px">
            <el-form-item label="内容布局">
              <el-radio-group size="small" v-model="data.posAlign">
                <el-radio label="flex-start">居左</el-radio>
                <el-radio label="center">居中</el-radio>
              </el-radio-group>
            </el-form-item>

            <el-form-item label="左侧文字">
              <ColorPicker :color="data.color" :name="'left'"></ColorPicker>
            </el-form-item>

            <el-form-item label="左侧图标">
              <ColorPicker :color="data.color" :name="'left_icon'"></ColorPicker>
            </el-form-item>

            <el-form-item label="右侧文字">
              <ColorPicker :color="data.color" :name="'right'"></ColorPicker>
            </el-form-item>

            <el-form-item label="右侧图标">
              <ColorPicker :color="data.color" :name="'right_icon'"></ColorPicker>
            </el-form-item>

            <el-form-item label="背景色">
              <ColorPicker :color="data.color" :name="'bg'"></ColorPicker>
            </el-form-item>

            <el-form-item label="上间距">
              <div class="slider_box">
                <el-slider class="slider_item" :max="20" v-model="data.margin.top"></el-slider>
                <el-input-number v-model="data.margin.top" :controls="false" :min="0" :max="20"></el-input-number>
              </div>
            </el-form-item>

            <el-form-item label="下间距">
              <div class="slider_box">
                <el-slider class="slider_item" :max="20" v-model="data.margin.bottom"></el-slider>
                <el-input-number v-model="data.margin.bottom" :controls="false" :min="0" :max="20"></el-input-number>
              </div>
            </el-form-item>

            <el-form-item label="左右间距">
              <div class="slider_box">
                <el-slider class="slider_item" :max="20" v-model="data.margin.lr"></el-slider>
                <el-input-number v-model="data.margin.lr" :controls="false" :min="0" :max="20"></el-input-number>
              </div>
            </el-form-item>

            <el-form-item label="圆角">
              <div class="slider_box">
                <el-slider class="slider_item" :max="20" v-model="data.radius"></el-slider>
                <el-input-number v-model="data.radius" :controls="false" :min="0" :max="20"></el-input-number>
              </div>
            </el-form-item>
          </el-form>
        </el-collapse-item>
      </el-collapse>
    </div>
  </el-card>
</template>

<script>
import Linkdiv from "@/components/Link/index";
import ColorPicker from "@/components/ColorPicker/index";
export default {
  data() {
    return {
      activeName: ["c0", "c1", "c2"]
    };
  },
  props: {
    data: {
      type: Object,
      default: {}
    }
  },
  components: {
    Linkdiv,
    ColorPicker
  },
  methods: {
    //重置颜色
    Reset_Color(a, b) {
      this.data.color[a] = b;
    },
    //删除图标
    removeIcon(tag) {
      this.data.content[tag] = "";
    },
    selectlink() {
      this.$parent.showlinkselcet(this.data.linkdata);
    },
    getAData(item) {
      this.data.linkdata = item;
    },
    //选择图标
    chooseIcon(type) {
      this.type = type;
      this.$parent.showiconselcet();
    },

    geticon(data) {
      if (this.type == "left") {
        this.data.content.left_icon = data;
      } else {
        this.data.content.right_icon = data;
      }
    }
  }
};
</script>

<style lang="scss">
//样式覆盖
.bds {
  .el-collapse-item__wrap {
    overflow: visible;
  }
}

.icon_box {
  width: 36px;
  height: 36px;
  line-height: 36px;
  text-align: center;
  cursor: pointer;
  border: 1px solid #dcdfe6;
  position: relative;

  .icon-abl-close {
    position: absolute;
    top: -6px;
    right: -9px;
    color: rgba(0, 0, 0, 0.3);
    font-size: 16px;
  }

  &:hover {
    .choose_bar {
      display: block;
    }
  }

  .choose_bar {
    display: none;
    position: absolute;
    bottom: 0;
    left: 0;
    font-size: 10px;
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    line-height: 18px;
    text-align: center;
    width: 100%;

    i.txt {
      display: inline-block;
      font-style: normal;
      -webkit-transform: scale(0.75);
      transform: scale(0.75);
      letter-spacing: 2px;
    }
  }
}

.select_link {
  background: #fff;

  .select_btn {
    height: 36px;
    line-height: 28px;
    border-radius: 4px;
    padding: 4px 6px;
    cursor: pointer;
    color: #2d8cf0;
    box-sizing: border-box;
    border: 1px solid #dcdfe6;

    &:hover {
      border-color: #2d8cf0;
    }
  }
}
</style>
